import PropTypes from "prop-types";
import "@/styles/components/templates/tableLayout.scss";

export const SearchContainer = ({ children, ...resProps }) => {
  return (
    <div className="search-container" {...resProps}>
      {children}
    </div>
  );
};

SearchContainer.propTypes = {
  children: PropTypes.node,
};

export const SearchAction = ({ children, ...resProps }) => {
  return (
    <div className="search-action" {...resProps}>
      {children}
    </div>
  );
};

export const SearchForm = ({ children, collapse = true, ...resProps }) => {
  return (
    <div className="search-form" data-collapse={collapse} {...resProps}>
      {children}
    </div>
  );
};

SearchForm.propTypes = { collapse: PropTypes.bool, children: PropTypes.node };

SearchAction.propTypes = {
  children: PropTypes.node,
};

export const OperateContainer = ({ children, ...resProps }) => {
  return (
    <div className="operate-container" {...resProps}>
      {children}
    </div>
  );
};
OperateContainer.propTypes = {
  children: PropTypes.node,
};

export const MainContainer = ({ children, ...resProps }) => {
  return (
    <div className="table-card" {...resProps}>
      {children}
    </div>
  );
};
MainContainer.propTypes = {
  children: PropTypes.node,
};

const TableLayout = ({ children, ...resProps }) => {
  return (
    <div className="table-layout-container" {...resProps}>
      {children}
    </div>
  );
};
TableLayout.propTypes = {
  children: PropTypes.node,
};

export default TableLayout;
